<template>
    <div class="bigmiddiv bgwhite bordergray">
        <!-- <el-input v-model="search" style="width: 240px" placeholder="" />
      <el-button type="primary">搜索</el-button> -->
        <el-input v-model="search" class="searchinput" style="width: 731px;" placeholder="请输入标项名称等关键词，例如：理疗设备">
            <template #append>
                <el-button type="primary" class="searchprimary">搜索</el-button>
            </template>
        </el-input>
    </div>
    <!--  -->
    <section class="bigmiddiv bgwhite" :class="[downUpStyle ? 'downUpStyle' : '']">
        <div class="flex searchitem">
            <span class="leftgray">已选条件:</span>
            <div class="flexbewteen searchtj">
                <span>默认</span>
                <div class="blue flex" @click="clearFun">

                    <el-icon>
                        <Delete />
                    </el-icon>

                    <span>清空</span>
                </div>
            </div>
        </div>
        <div class="flex searchitem">
            <span class="leftgray">大&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区:</span>
            <div class="righticon">
                <span v-for="(item, index) in bigarea" @click="bigAreaSearch(index)"
                    :class="[item.choose ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
            </div>

        </div>
        <div class="flex searchitem">
            <span class="leftgray">省&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份:</span>
            <div class="righticon">
                <span v-for="(item, index) in shengArry" @click="shengSearch(index)"
                    :class="[item.choose ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
            </div>
        </div>
        <div class="flex searchitem">
            <span class="leftgray">中标日期:</span>
            <div class="righticon">
                <span v-for="(item, index) in zbArry" @click="zbSearch(index)"
                    :class="[zbIndex == index ? 'active' : '', 'itemspan']" :key="item.name">{{
                        item.name }}</span>
                <span class="itemspan">自定义</span>
                <el-date-picker v-model="time" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
                    format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
            </div>
        </div>
        <!-- 高级展开盒子 -->
        <div>
            <div class="flex searchitem">
                <span class="leftgray">更多筛选:</span>
                <div class="flexbewteen searchtj">
                    <el-cascader placeholder="行业" :options="options" :props="props" clearable />
                    <!-- <el-dropdown>
                        <span class="el-dropdown-link flex">

                            行业<el-icon class="el-icon--right">
                                <CaretBottom />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>Action 1</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown> -->
                    
                </div>
            </div>


        </div>


    </section>
    <div class="center">
        <el-icon :class="['iconupdown', downUpStyle ? 'activeroute' : '']" @click="downUpSlider">
            <ArrowDown />
        </el-icon>
    </div>
    
    <div class="bigmiddiv  tablecon">
        <!-- {{ multipleSelection }} -->
        <div class="tabletitle flexbewteen">
            <section class="lefttitle">
                搜索到<span>254500</span>
            </section>

        </div>
        <ul>
            <li @click="goCydwjsdesc(item.id)" class="flex  liitem" v-for="item in tableData" :key="item.id">
                <div class="leftName">
                    {{ item.name }}
                </div>
                <div class="rightcon">
                    <p class="longName">
                        {{ item.longName }}
                        <span class="tag">注销</span>
                        <span class="tag redtag">注销</span>
                        <span class="tag bluetag">注销</span>
                    </p>
                    <p>
                        法定代表人:<span class="blue">{{ item.person }}</span>
                        成立日期:{{ item.date }}
                    </p>
                    <p>
                        经营地址:{{ item.address }}
                    </p>
                </div>
            </li>
        </ul>
        <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :background="true" size="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>





</template>
<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import {useRoute,useRouter} from "vue-router";
const route=useRoute();
const router=useRouter()
const search = ref("");
const visible = ref(false)
// 下面是行业
const props = { multiple: true }

const options = [
    {
        value: 1,
        label: '一级',
        children: [
            {
                value: 2,
                label: '二级1',
                children: [
                    { value: 3, label: '31' },
                    { value: 4, label: '32' },
                    { value: 5, label: '33' },
                ],
            },
            {
                value: 6,
                label: '二级2',
                children: [
                    { value: 7, label: '34' },
                    { value: 8, label: '35' },
                    { value: 9, label: '36' },
                ],
            },
            {
                value: 10,
                label: '二级3',
                children: [
                    { value: 11, label: '37' },
                    { value: 12, label: '38' },
                    { value: 13, label: '39' },
                ],
            },
        ],
    },

]

const bigIndex = ref(0)
const bigarea = ref([
    {
        name: "全部",
        choose: true
    },
    {
        name: "东北",
        choose: false
    },
    {
        name: "华北",
        choose: false
    },
    {
        name: "华东",
        choose: false
    },
    {
        name: "华南",
        choose: false
    },
    {
        name: "西北",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    }
])
const bigAreaSearch = (index) => {
    bigarea.value[index].choose = !bigarea.value[index].choose

}


const shengIndex = ref(0)
const shengArry = ref([
    {
        name: "全部",
        choose: true
    },
    {
        name: "河北",
        choose: false
    },
    {
        name: "山西",
        choose: false
    },
    {
        name: "内蒙古",
        choose: false
    },
    {
        name: "北京",
        choose: false
    },
    {
        name: "天津",
        choose: false
    },
    {
        name: "辽宁",
        choose: false
    },
    {
        name: "吉林",
        choose: false
    },
    {
        name: "黑龙江",
        choose: false
    },
    {
        name: "上海",
        choose: false
    },
    {
        name: "江苏",
        choose: false
    },
    {
        name: "浙江",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    },
    {
        name: "西南",
        choose: false
    },
    {
        name: "华中",
        choose: false
    }
])
const shengSearch = (index) => {
    shengArry.value[index].choose = !shengArry.value[index].choose
}


const zbIndex = ref(0)
const zbArry = [
    {
        name: "全部"
    },
    {
        name: "最近7天"
    },
    {
        name: "最近30天"
    },
    {
        name: "最近1年"
    },

]
const zbSearch = (index) => {
    zbIndex.value = index
}

const time = ref("");
// 清空所有状态
const clearFun = () => {
    // bigIndex.value = 0;
    // shengIndex.value = 0;
    bigarea.value.map(item => { item.choose = false })
    shengArry.value.map(item => { item.choose = false })
    zbIndex.value = 0;
}



// 隐藏所有的条件
const downUpStyle = ref(false)
const downUpSlider = () => {
    downUpStyle.value = !downUpStyle.value
}



const tableData = ref([
    {
        id: 1,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    },
    {
        id: 2,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    },
    {
        id: 2,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    }
])
const goCydwjsdesc=(id)=>{
 router.push("/cgdwjsdesc")
}



// 下面是  const myRef = ref(null);
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const disabled = ref(false)
const total = ref(400)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}
</script>
<style scoped lang="scss">
.tablecon {
    padding: 16px;
    background: white;

    .tabletitle {
        font-size: 14px;
        margin-bottom: 16px;

        b {
            font-weight: bold;

        }

        .lefttitle {
            span {
                color: #3873FF;
                font-weight: bold;
            }
        }

        .manyExport {
            margin-right: 20px;

        }

    }
}

.liitem {
    align-items: flex-start;
    color: #b1bebd;

    .blue {
        color: #3873FF;
        margin-right: 16px;
    }

    .rightcon {
        line-height: 2;
    }

    .longName {
        font-size: 18px;
        color: black;
        font-weight: bold;
    }

    .leftName {
        padding: 10px;
        font-size: 20px;
        background: hsl(197, 91%, 70%);
        margin-right: 16px;
        border-radius: 10px;
        font-weight: bold;
        color: black;
    }
}
.searchinput {
    border: 1px solid #3873FF;
    border-right: 0;
    border-radius: 4px;

    .el-input__wrapper {
        border: 0 !important;
    }
    .searchprimary {
    background: #3873FF !important;
    color: white !important;
}

}

.leftgray {
    color: #888B98;
    font-size: 14px;
    width: 80px;
}

.righticon {
    flex: 1;
}

.searchitem {
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: flex-start;

    .itemspan {
        background: none;
        padding: 2px 8px;
        margin-right: 10px;
        border-radius: 4px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .active {
        background: #3873FF !important;
        color: white !important;
    }

}

.searchtj {
    flex: 1;
}

.blue {
    color: #3873FF;

}

.tallbox {
    border-radius: 8px;
    background: #FAFAFA;
    padding: 24px;
    display: none;
}

.heightStyle {
    display: block;
}

.boldb {
    font-weight: bold;
}

.formtitle {
    margin-bottom: 20px;
}

.doubledown {
    width: 16px;
    height: 16px;
}

.activeroute {
    transform: rotate(180deg);
}

.Vector {
    width: 14px;
    height: 4px;
    margin: 0 4px;
}

.iconupdown {
    position: relative;
    top: -9px;
    font-size: 20px;
    background: white;
    // padding: 5px 20px;
    border-radius: 10px;
    display: inline-block;
    width: 60px;
}

.downUpStyle {
    display: none;
}



.pagination {
    margin-top: 20px;
}

.popovercon {
    .itemspan {
        display: inline-block;
        padding: 3px;
        margin: 5px;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>